/*
 * Copyright 2020 Adobe. All rights reserred.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* colors */
  --background-color: white;
  --light-color: #f8f8f8;
  --dark-color: #505050;
  --text-color: #131313;
  --text-color-secondary: #1B1B1B;
  --link-color: #3b63fb;
  --link-hover-color: #1d3ecf;
  --link-color-secondary: #0190a0;
  --link-hover-color-secondary: #0190a0;

  /* fonts */
  --body-font-family: 'Red Hat Display', red-hat-display-fallback, sans-serif;
  --heading-font-family: 'Red Hat Display', red-hat-display-fallback, sans-serif;

  /* body sizes */
  --body-font-size-m: 22px;
  --body-font-size-s: 19px;
  --body-font-size-xs: 17px;

  /* heading sizes — fluid clamp() (CU-226/CU-227) */
  --heading-font-size-xxl: clamp(2rem, 1.43vw + 1.7143rem, 3rem);     /* h1: 32px → 48px */
  --heading-font-size-xl:  clamp(1.5rem, 0.71vw + 1.3571rem, 2rem);   /* h2: 24px → 32px */
  --heading-font-size-l:   clamp(1.25rem, 0.71vw + 1.1071rem, 1.75rem); /* h3: 20px → 28px */
  --heading-font-size-m:   clamp(1.125rem, 0.54vw + 1.0179rem, 1.5rem); /* h4: 18px → 24px */
  --heading-font-size-s:   clamp(1rem, 0.36vw + 0.9286rem, 1.25rem);  /* h5: 16px → 20px */
  --heading-font-size-xs:  clamp(0.875rem, 0.36vw + 0.8036rem, 1.125rem); /* h6: 14px → 18px */

  /* nav height */
  --nav-height: 76px;
}

/* fallback fonts */
@font-face {
  font-family: red-hat-display-fallback;
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
  src: local('Arial');
}

@media (width >= 900px) {
  :root {
    /* body sizes */
    --body-font-size-m: 18px;
    --body-font-size-s: 16px;
    --body-font-size-xs: 14px;
    /* heading sizes handled by clamp() — no breakpoint overrides needed (CA6) */
  }
}

html {
  overflow-x: clip;

  /* Reserve scrollbar column always so viewport width stays constant across
     scroll-driven layout changes. Without this, on Windows/Linux (classic
     scrollbars that occupy layout space) the header + megamenu jitter
     horizontally when the header transitions from 76px → 50px on scroll and
     content briefly slips under the vertical-overflow threshold, toggling the
     scrollbar and shifting viewport width. macOS (overlay scrollbars) is not
     affected which is why the bug only reproduces on Windows. */
  scrollbar-gutter: stable;
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.6;
  overflow-x: clip;
}

body.appear {
  /* Sticky-footer layout: on short pages (content shorter than the
     viewport) this keeps <footer> pinned to the bottom of the screen
     instead of leaving a blank gap below it. <main> grows to fill any
     leftover space; header/marquesina/footer keep their natural size. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.appear > main {
  flex: 1 0 auto;
}

body.loader-curtain-active header,
body.loader-curtain-active footer,
body.loader-curtain-active .marquesina-global-container {
  visibility: hidden;
}

/* Main stays painted (behind the loader's fixed overlay) so the browser
   counts its background-image for LCP immediately, instead of waiting
   until the loader dismisses.  The loader's position:fixed + z-index:9999
   + solid background already hides main visually from the user. */

/* Critical loader positioning — must be in render-blocking CSS so the loader
   overlays everything from the first frame, before cms-loader.css loads. */
.section.cms-loader-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  padding: 0 !important;
  margin: 0 !important;
  background-color: var(--color-gray-50);
}

/* Center loader content vertically and horizontally before cms-loader.css loads.
   aem.js wraps the block in .cms-loader-wrapper — it needs height to pass through. */
.section.cms-loader-container .cms-loader-wrapper {
  height: 100%;
  width: 100%;
}

.section.cms-loader-container .cms-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  height: 100%;
  width: 100%;
}

.section.cms-loader-container .cms-loader > div:first-child,
.section.cms-loader-container .cms-loader > div:first-child img,
.section.cms-loader-container .cms-loader > div:first-child picture {
  width: 100px;
  max-width: 100px;
  height: auto;
}

header {
  height: var(--nav-height);
  position: relative;
  z-index: 100;
}

body.appear > header,
body.appear > .marquesina-global-container,
body.appear > footer {
  flex-shrink: 0;
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 600;
  line-height: 1.25;
  scroll-margin: 40px;
}

h1 { font-size: var(--heading-font-size-xxl); }
h2 { font-size: var(--heading-font-size-xl); font-weight: 700; line-height: normal; color: var(--text-color-secondary); margin-top: 0; margin-bottom: 0; }
h3 { font-size: var(--heading-font-size-l); }
h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }
h6 { font-size: var(--heading-font-size-xs); }

/* body-fluid: paragraph-level typography (p) plus every list item type
 * (ul/ol → li, dl → dt/dd) share the same fluid clamp so reading size
 * stays consistent across contexts and breakpoints (AVAEMF2P20-295).
 * Scale: 14px → 16px, el valor de --font-size-normal (fuente única: el token,
 * no una copia del clamp — la copia fue justo lo que se desincronizó).
 *
 * Bug 1309197: las listas van acotadas a `main`. El selector suelto también
 * alcanzaba el chrome (menú, footer), que no es contenido de lectura y tiene
 * su propia escala: los items del footer pasaban de 14px a 18px y los del
 * megamenú perdían su tamaño propio. El PBI pedía la escala para las listas
 * del contenido; el AC del bug es explícito en que no debía ser transversal. */
p { font-size: var(--font-size-normal); }

main :is(li, dt, dd) { font-size: var(--font-size-normal); }

/* context-h1: production utility — h2 styled as h1 visual size */
.section.text-center h2 {
  font-size: var(--heading-font-size-xl);
  line-height: 1.25;
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  /* color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word; */
}

/* AVAEMF2P20-295: los enlaces EMBEBIDOS EN TEXTO heredan el font-size del
 * elemento que los contiene, para que no se vean más grandes que la frase en la
 * que van (era el caso reportado en el PBI: el <a> se quedaba en el default del
 * UA mientras el texto alrededor bajaba con el clamp).
 *
 * Bug 1309197: antes esto vivía en `a:any-link` a secas y SIN capa, así que le
 * ganaba a cualquier utilidad de Tailwind (`@layer utilities`) por origen, no
 * por especificidad. Resultado: todo enlace del sitio con su propio tamaño lo
 * perdía y heredaba los 18px del body — p. ej. el `text-[16px]` de los items del
 * megamenú, que en producción sí se aplica. Acotarlo a los contenedores de
 * texto DENTRO de `main` deja la intención del PBI intacta y devuelve su tamaño
 * a los enlaces del chrome y de los componentes del DS. */
main :is(p, li, dt, dd, h1, h2, h3, h4, h5, h6) a:any-link {
  font-size: inherit;
}

main > .section {
  /* 1248px is the max CONTENT width; +64px leaves room for the 32px external
     lateral margin on each side (VSTS 1282504). */
  max-width: calc(var(--container-xl) + 64px);
  margin: auto;
  padding: 32px var(--main-section-div-padding, 16px);
}

main > .section:first-of-type {
  margin-top: 0;
}

main.has-custom-bg:not(.has-background-image) {
  background: var(--page-bg, #f1f1f1);
}

/* Fallback #f1f1f1 reachable SIN autor: si nadie configuró un color de página
   (`.has-custom-bg` ausente, así que la regla de arriba nunca aplica), `main`
   igual necesita ese mismo gris de base en las páginas de Members —si no, los
   márgenes laterales fuera del ancho del `.members-elite-sheet` (ver más abajo)
   quedan en blanco mientras el sheet es gris, y se nota el corte.
   Acotado con `:has()` a páginas que tengan `.members-elite-sheet`: no toca el
   fondo por defecto (blanco) de ninguna otra página del sitio — a diferencia
   de sacarle el gating de `.has-custom-bg` a la regla de arriba, que pintaría
   de gris el fondo default de TODO el sitio sin configuración de autor. */
main:has(.members-elite-sheet):not(.has-custom-bg) {
  background: #f1f1f1;
}

/* Page background coexists with CMS Background Image (CA3): the author's
   solid color goes to background-color (visible around/under transparent
   image areas) and a gradient goes as a layer below the image. */
main.has-custom-bg.has-background-image {
  background-color: var(--page-bg-color, var(--bg-fallback-color, transparent));
}

main > .section.has-custom-bg,
main > .mosaic-v2-mobile-container.has-custom-bg {
  position: relative;
  isolation: isolate;
}

main > .section.has-custom-bg::before,
main > .mosaic-v2-mobile-container.has-custom-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--section-bg);
  z-index: -1;
  pointer-events: none;
}

/* mosaic-v2 carousel sets overflow:clip on the section to hide off-screen
   slides. When `has-nav-padding` is set (autoplay/arrows), slide clipping is
   done by the inner `.mosaic-v2-clip` wrapper, so the section's overflow is
   redundant. Override it so the full-bleed bg pseudo-element is not clipped. */
main > .section.has-custom-bg.mosaic-v2-container.has-nav-padding {
  overflow: visible;
}

/* Members Elite header full-bleed (refinamiento 2026-07-14, puntos 1.3/2.1):
   el gradiente por tier se pinta en un ::before de 100vw (mismo patrón
   has-custom-bg de arriba) para que el color llegue a los bordes del viewport
   aunque `main > .section` limite el contenido a 1248px. El organism
   (members-elite-header.js) entrega el gradiente en la CSS var inline
   `--elite-header-bg`; el contenido interior conserva el ancho del section. */
.members-elite-header {
  position: relative;
  isolation: isolate;
}

.members-elite-header::before {
  content: '';
  position: absolute;
  inset: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--elite-header-bg);
  z-index: -1;
  pointer-events: none;
}

/* Cóndor decorativo del header elite (refinamiento 2026-07-15, coords exactas de
   Figma verificadas vía MCP 2026-07-16). El componente `EliteHeaderCondor` rinde
   un <img> del vector `decorative-vector.svg` (pluma fina, el MISMO del drawer
   hero). Tamaño y posición van acá (no en clases Tailwind arbitrarias, que
   tw:watch no compila sin correr). En TODOS los breakpoints el vector es 117×131.
   - Mobile (≤767): Figma node 765:64994 → `right:-16px` y `top:-3px` (el -16
     cancela el padding lateral del section para que el cóndor llegue al borde
     de pantalla; -3px lo eleva sobre el top del hero).
   - Tablet (768-1023): Figma node 765:65047 → `right:352px` y `top:-45px`
     (posición absoluta relativa al header — el cóndor queda anclado ARRIBA
     y desplazado 352px desde la derecha, justo a la izquierda de la balance box).
   - Desktop (≥1024): 117×131 anclado ABAJO (bottom:0). El ancla es Figma
     `1059:65464` (Greeting @1440): vector x=910 w=117 → right edge en x=1027
     del CANVAS de 1440, es decir 413px desde el borde DERECHO DEL VIEWPORT.
     El header está dentro del section (max-width 1312, content 1248 centrado)
     así que la CSS `right` (relativa al padre) NO coincide con `413px from viewport`.
     Fórmula: `(100% - 100vw) / 2` traslada el frame al viewport (negativo cuando
     el header es más angosto que el viewport). `min(...)` escala proporcional al
     ancho de viewport (100vw × 413/1440 ≈ 28.68vw) desde 1024 hasta 1440.
   - >1440 (VSTS 1300045): el ancla al viewport dejaba al cóndor fijo a 413px
     del borde de pantalla mientras el contenido (max 1248) se sigue centrando:
     el cóndor terminaba DEBAJO de la balance box. A partir de 1440 el ancla
     pasa a ser el CONTENIDO: right relativo al header = 413 - 96 (margen del
     content @1440) = 317px, continuo en el corte y constante respecto a la
     balance box en cualquier viewport mayor. */
.members-elite-header [data-name='members-elite-header-condor'] {
  position: absolute;
  top: -3px;
  right: -16px;
  width: 117px;
  height: 131px;
  display: block;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .members-elite-header [data-name='members-elite-header-condor'] {
    top: 32px;
    right: 352px;
    width: 117px;
    height: 131px;
  }
}

@media (min-width: 1024px) {
  .members-elite-header [data-name='members-elite-header-condor'] {
    top: auto;
    bottom: 0;
    right: calc((100% - 100vw) / 2 + min(calc(100vw * 413 / 1440), 413px));
    width: 117px;
    height: 131px;
  }
}

@media (min-width: 1440.02px) {
  .members-elite-header [data-name='members-elite-header-condor'] {
    right: 317px;
  }
}

/*
    Sheet de contenido gris del members-elite (refinamiento 2026-07-15). Fondo
    #F1F1F1 full-bleed (100vw, mismo patrón que el hero) detrás de tabs + paneles,
    ahora dinámico según el color de página del autor (ver `--members-sheet-bg`
    debajo) — #F1F1F1 sigue siendo el fallback cuando no hay color autorado.
    (Más claro que el contenedor #DFDFDF del segmented control, para que ese óvalo
    se distinga sobre el sheet.)
    `z-index:1` crea contexto de apilamiento para que el ::before (z-index:-1)
    quede por ENCIMA del hero en el solape (si no, el hero lo taparía). El
    `margin-top:-32px` cancela el gap del flex-col (lg:gap-8 = 32px → a ras en
    desktop; gap-6 = 24px → 8px de solape en ≤1023). `padding-top` da aire a los
    tabs por debajo del borde del hero. Las esquinas superiores del ::before se
    redondean 16px (Figma 1056:32884 — efecto sheet montando sobre el hero,
    aplica en mobile y desktop).
*/
.members-elite-sheet {
  position: relative;
  z-index: 1;
  margin-top: -32px;
  padding-top: 32px;
  padding-bottom: 48px;

  /* Fondo dinámico: homologa el "resto" del sheet (ver ::before más abajo)
     con el color de página configurado por el autor. `--page-bg-color` es
     seteada como custom property inline en `main` por `applyPageBackground()`
     (scripts/scripts.js) cuando el autor define un color sólido vía metadata
     de página (`bg-color-1`/`bg-color-2`); al ser una custom property se
     hereda hasta acá sin cambios de JS. Sin color autorado la variable no
     existe y el fallback mantiene el gris de siempre. Esa var SOLO puede
     traer un color sólido (nunca un gradient()), así que no hace falta
     lógica especial para un fondo de página con degradado. */
  --members-sheet-bg: var(--page-bg-color, #f1f1f1);
}

@media (max-width: 767px) {
  .members-elite-sheet {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

@media (min-width: 768px) {
    .members-elite-sheet {
        margin-top: 0px;
        padding-top: 0;
    }
}

/* GEOMETRÍA DEL DIVISOR EN TABLET (768–1023). Vale para Elite, Cuenta, Millas,
   Viajes y para CUALQUIER página de Members que se sume: nada de acá está
   scopeado a una vista.

   El divisor monta SOBRE el encabezado (arranca 40px por encima del sheet y
   mide 32), con sus esquinas de 16px a la vista, y queda con 24px de aire
   arriba y 24 abajo — la misma pauta que `/members/profile`, que el cliente
   tomó como buena.

   Se sostiene con dos palancas, las dos genéricas:

   · `margin-top: 8px` en el SHEET. Empuja al sheet —y con él al divisor, que
     está anclado a su tope— sin tocar el encabezado. Es lo que da los 24 de
     arriba, y no altera la relación divisor↔tabs porque el padding de abajo
     también se mide desde el tope del sheet.
   · `padding-top: 16px` en el SHEET. La franja termina 8px DENTRO del sheet,
     así que 8 + 16 = los 24 de abajo, hasta el switch de tabs.

   INVARIANTE para una página nueva: el contenido del encabezado tiene que
   cerrar 64px por encima del tope del sheet (40 de solape + 32 de franja - 8
   que la franja mete dentro del sheet, + 24 de aire). Con
   `MembersEliteHeader` sale solo: sus 32 de padding-bottom + los 24 de gap del
   flex-col + estos 8 = 64. El hero colapsable cierra con 24 en vez de 32, y
   esos 8 que le faltan los pone la regla de `.members-hero-container` de más
   abajo. Un encabezado nuevo que cierre con 32 no necesita nada. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .members-elite-sheet {
    margin-top: 2px;
    padding-top: 16px;
  }

  .members-elite-wrapper .members-elite-header {
    padding-bottom: 38px;
  }

  /* Los 8 que le faltan al hero colapsable: su padding inferior es 24 contra
     los 32 de `MembersEliteHeader`. Va en el contenedor y no en el hero porque
     el hero también se usa en `/members`, donde no hay sheet. */
  .members-hero-container:has(+ .members-elite-sheet) {
    padding-bottom: 8px;
  }

  /* El HERO crece 16px hacia abajo y el sheet los devuelve, así el divisor no
     se mueve (QA 2026-09-17).
     Las esquinas del divisor son una MUESCA: el ::before se recorta y deja ver
     lo que haya detrás. El degradado del hero terminaba JUSTO donde arranca la
     banda, así que detrás de la muesca no había hero sino el fondo de la
     página, y las esquinas se veían claras en vez de doradas — el divisor no
     parecía montado sobre el hero. Elite y Cuenta no tienen el problema: su
     `MembersEliteHeader` pinta 16px más abajo que el tope de la banda.

     Son 16 y no menos porque 16 es el RADIO: es exactamente lo que baja el arco
     en el borde. Con menos, la parte de abajo de la muesca sigue clara.

     Va como `border-bottom` transparente y no como padding porque el degradado
     es un `style` inline que arma el JS con el color del tier: no se puede
     duplicar en la hoja. El fondo pinta bajo un borde transparente
     (`background-clip: border-box`, el default), y al ser un degradado de 90deg
     —horizontal— se continúa sin costura. Tampoco sirve `padding` + `margin`
     negativo: `members-hero__animator` lleva `overflow: hidden` para la
     animación de colapso y recorta todo lo que se salga de su caja; creciendo
     de verdad, la caja del animator crece con el hero y no hay recorte. */
  .members-hero-container:has(+ .members-elite-sheet) [data-name='members-hero-expanded'],
  .members-hero-container:has(+ .members-elite-sheet) [data-name='members-hero-compact'] {
    border-bottom: 16px solid transparent;
  }

  /* Los 16 que creció el hero se descuentan acá, para que el sheet —y con él el
     divisor y los 24/24 de aire— queden exactamente donde estaban. Sólo en las
     páginas con hero: en Elite y Cuenta el encabezado no creció y su sheet se
     queda con los 8 genéricos de arriba. */
  .members-hero-container:has(+ .members-elite-sheet) + .members-elite-sheet {
    margin-top: -8px;
  }
}

/* El global `main > .section { padding: 32px … }` dejaba 32px de padding-bottom
   BLANCO debajo del sheet (entre el último panel y el footer). Lo anulamos en
   esta sección y ese espacio lo aporta ahora el `padding-bottom` gris del sheet
   → el gris del sheet llega hasta el footer sin franja blanca. */
main > .section.members-elite-container {
  padding-bottom: 0;
}

.members-elite-sheet::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: 0;

  /* Full-bleed vía left+right = calc(50% - 50vw) (NO `width: 100vw`): con ambos
     seteados el ancho es el del viewport EXACTO. `width: 100vw` sobrepasaba el
     ancho visible (por `scrollbar-gutter: stable` + `overflow-x: clip` en html),
     dejando las esquinas superiores redondeadas FUERA de lo visible → se veían
     cuadradas. Así los corners caen justo en el borde del viewport y se ven. */
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);

  /* Divisor (CF `hero.borderAccentColor`, Figma 1958:61344 "Border/Divider").
     Sólo la FRANJA superior toma el color; el resto usa `--members-sheet-bg`
     (declarada arriba en `.members-elite-sheet`), dinámica según el color de
     página del autor, con el mismo `#f1f1f1` de siempre como fallback. Va
     como degradado de dos paradas duras y no como un elemento nuevo porque
     acá la franja y el fondo de la página son la MISMA superficie —el
     ::before arranca sobre el header y llega hasta abajo—, así que pintarlo
     entero teñiría toda la página.
     El fallback del DIVISOR se mantiene fijo en `#f1f1f1` (no se homologa con
     `--members-sheet-bg`): son conceptos distintos —acento del CF vs. color
     de página— y homologarlos hurtaría el gris de siempre cuando hay color de
     página pero NO color de divisor configurado por el autor.
     Sin ninguna de las dos variables autoradas, ambas paradas quedan en
     #f1f1f1 y el resultado es idéntico al de siempre. */
  background: linear-gradient(
    to bottom,
    var(--members-divider-color, #f1f1f1) 0 var(--members-divider-h, 16px),
    var(--members-sheet-bg) var(--members-divider-h, 16px)
  );
  z-index: -1;
  pointer-events: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Las esquinas de 16px tienen que caer DENTRO de lo visible (QA 2026-09-16).
   El full-bleed de arriba deja el ::before de exactamente 100vw, y `100vw`
   INCLUYE la franja del scrollbar (`scrollbar-gutter: stable` en html): a 834
   son 834 de ::before contra 822 visibles, o sea 6px de desborde por lado. Con
   ese desborde el arco de la esquina queda fuera de pantalla y el divisor se ve
   como un bloque recto, en vez de la pestaña redondeada de `/members/profile`
   —que sí muestra el arco entero porque su banda va por dentro del hero—.
   Acá se acota al ancho de `main` (= ancho visible) restando el padding lateral
   de la sección, que es de quien cuelga el sheet. Sólo en <1024: desde ahí no
   hay divisor ni radios, y el ::before tiene que seguir full-bleed para que el
   gris llegue al borde aunque la sección esté topeada por `max-width`. */
@media (max-width: 1023.98px) {
  .members-elite-sheet::before {
    left: calc(-1 * var(--main-section-div-padding, 16px));
    right: calc(-1 * var(--main-section-div-padding, 16px));
  }
}

/* Durante la CARGA el divisor se queda en el gris de siempre: el skeleton es un
   placeholder y no debe adelantar el color de marca, que además entraría y
   saldría de golpe al llegar el contenido. Se apaga neutralizando la variable,
   así la regla del ::before queda intacta.

   Dos selectores porque el sheet y el skeleton se anidan al revés según la
   página: en Elite y Cuenta el skeleton ENVUELVE al sheet; en Millas y Viajes
   el sheet envuelve al skeleton. */
[data-name$='-skeleton'] .members-elite-sheet,
.members-elite-sheet:has([data-name$='-skeleton']),
.members-elite-sheet:has([data-name='members-miles-loading']) {
  --members-divider-color: #f1f1f1;
}

/* Un solo divisor por página.
   Millas y Viajes tienen las DOS piezas a la vez: el hero colapsable trae su
   máscara (`members-hero__stitch`, que recorta una muesca y deja asomar el
   color de atrás) y además está el sheet con su franja. En mobile las dos se
   activan y el divisor salía DUPLICADO: 16px de muesca pegados a 16px de
   franja. Donde el sheet manda, se apaga la máscara del hero.
   `/members` y `/members/profile` no entran: no tienen sheet. */
.members-hero-container:has(+ .members-elite-sheet) .members-hero__stitch {
  -webkit-mask: none;
  mask: none;
}

/* Desde 1024 el divisor NO se ve: es una pieza de mobile y tablet. Acá el sheet
   sigue montando 8px sobre el header como siempre —eso no cambia—, pero esos
   8px vuelven al gris. Se apaga neutralizando la variable, igual que en el
   skeleton, así la regla del ::before queda intacta.
   El hero de `/members` no necesita nada: su muesca la dibuja una máscara que
   ya se apaga sola en este breakpoint. */
@media (min-width: 1024px) {
  .members-elite-sheet {
    --members-divider-color: #f1f1f1;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .members-elite-sheet::before {
    top: -40px;

    /* 32px de franja en este rango (pedido de diseño). Se mide desde el tope
       del ::before, que acá arranca 40px por encima del sheet y pinta POR
       ENCIMA del header —el efecto de sheet montado—, así que los 32 se ven
       enteros. Verificado por píxeles a 834. */
    --members-divider-h: 32px;
  }
}

/* QA 2026-08-19: faltaba este breakpoint — el contenedor flex del hero+sheet
   (`.members-elite`/`.members-account`/`.members-miles`, todos `flex-col gap-6
   lg:gap-8`) pasa a 32px de gap real desde `lg:` (1024px), pero este `::before`
   se había quedado en el default de 8px (pensado para el gap-6=24px de mobile,
   ya cancelado ahí por el margin-top:-32px de `.members-elite-sheet`). Sin este
   override quedaba una franja blanca de 24px entre el hero y el sheet en
   CUALQUIER página que use este patrón (confirmado también en
   `/members/profile/account`, no es exclusivo de Millas). Mismo criterio que
   el de arriba (gap real + margen de solape). */
@media (min-width: 1024px) {
  .members-miles-container .members-elite-sheet::before {
    top: -32px;

    /* Desde 1024px las esquinas van cuadradas (mismo criterio ya usado en el
       resto de las vistas `/members/profile/*`) — el radius 16px es solo para
       mobile/tablet. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* section metadata */

/* Invariante de layout (foundations "Márgenes y ancho de contenido"): el margen
   lateral (32/24/16px) es el espacio MINIMO entre el contenido y el borde del
   viewport y lo pone `main > .section`. Ningun estilo de seccion debe declarar
   padding horizontal: los estilos que solo quieren tocar el eje vertical usan
   `padding-block`, y la UNICA forma de renunciar al margen lateral es la clase
   `no-padding-x`, que existe para eso. */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);

  /* `margin: 0` cancelaba tambien el `margin: auto` de la seccion y la
     descentraba; `padding: 40px 0` borraba el margen lateral (VSTS 1282504). */
  margin-block: 0;
  padding-block: 40px;
}

main .section.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

main .section.center-content > div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* TODO: remove style, is only for client meet 17-12 - START */
.section.center-content:has(.default-content-wrapper) {
  /* Solo el eje vertical. Con `padding: 0` esta regla (0,3,0) ganaba a
     `main > .section` y a `padding-title`, y desde que 1282504 dio margen
     lateral a todas las secciones dejaba el contenido 32px por fuera del resto
     (o pegado al borde entre 1248 y 1311px). La media query de 1247px reponia
     el padding lateral y ya no hace falta. */
  padding-block: 0;
}
/* TODO: remove style, is only for client meet 17-12 - END */

.section.layout-1-2-992 > div {
  display: flex;
  flex-direction: column;
}

main div.section.padding-title {
  /* Solo cancela el padding vertical del `main > .section`; el horizontal lo
     sigue poniendo la seccion con su variable responsive (16/24/32px). Antes
     redeclaraba el lateral aqui, y al ser mas especifica (0,2,2) pisaba el
     `no-padding-x` del autor (0,2,0): una seccion con ambos se quedaba con
     margen lateral pese a haber pedido lo contrario. */
  padding-block: 0;
  h1,h2,h3,h4,h5,h6 {
    margin: 0;
  }
}

.section.padding-bottom-40 {
  padding-bottom: 40px;
}
.section.no-padding-top {
  padding-top: 0;
}

.section.no-padding-bottom {
  padding-bottom: 0;
}

.section.no-padding-y {
  padding-top: 0;
  padding-bottom: 0;
}

/* Unica forma sancionada de renunciar al margen lateral de la seccion: el autor
   pone el estilo "No padding x". Sin ella la invariante de arriba no tendria
   valvula de escape y las secciones a sangre tendrian que anular el padding por
   CSS de bloque. */
.section.no-padding-x {
  padding-left: 0;
  padding-right: 0;
}

/* Desktop >= 992px */
@media (min-width: 992px) {
  .section.layout-1-2-992 {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
    grid-auto-rows: auto;
    gap: 24px;
    align-items: start;
  }

  /* first direct child div -> left column, span 2 rows */
  .section.layout-1-2-992 > div:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  /* all other direct child divs -> right column, starting from row 1 */
  .section.layout-1-2-992 > div:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .section.layout-1-2-992 > div:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .section.layout-1-2-992 > div:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
  }

  .section.layout-1-2-992 > div:nth-child(n+5) {
    grid-column: 2;
  }
}

/* Responsive padding-inline breakpoints — mobile-first (solo min-width)
   para evitar huecos en Windows con DPR fraccional (125/150/175%) o con
   scrollbar-gutter reservado, donde el innerWidth queda en valores tipo
   1023.2px y max-width:1023px + min-width:1024px dejan un rango sin match.
   La cascada de min-width se encarga del override; ya no hay gaps posibles. */

/* Tablet: >= 768px → 24px */
@media (min-width: 768px) {
    :root {
        --main-section-div-padding: 24px;
    }

    main > .section > div {
        box-sizing: content-box;
    }
}

/* Desktop: >= 1024px → 32px
   1248px es un max-CONTENT width, no un breakpoint (VSTS 1282504): el
   margen lateral externo se mantiene en 32px para todo viewport >= 1024px. */
@media (min-width: 1024px) {
    :root {
        --main-section-div-padding: 32px;
    }
}

/* Gate de zona privada Members (1263924): cortina SYNC mientras se resuelve/redirige la
   sesión de un anónimo en una ruta del Portal. La activa gateMembersPortalEarly()
   (scripts.js) añadiendo `members-gate-pending` a <html>, ANTES de pintar, para que el
   contenido del perfil no sea visible. El redirect al login lo hace session.service;
   si no puede arrancar, el guard cae al home. Va en CSS eager para aplicar al 1er frame.
   Restaurado: se perdió en el commit ebd73fb9; el JS sigue agregando la clase. */
html.members-gate-pending main {
  visibility: hidden;
}

html.members-gate-pending body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: var(--background-color);
}

html.members-gate-pending body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  z-index: 10001;
  border: 3px solid var(--light-color);
  border-top-color: var(--text-color-secondary);
  border-radius: 50%;
  animation: members-gate-spin 0.8s linear infinite;
}

@keyframes members-gate-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.members-gate-pending body::after { animation: none; }
}

/* ── Skeleton: barrido lateral COMPARTIDO ────────────────────────────────────
 *
 * BUG 1284741, punto 4 del rechazo de QA del 2026-08-31: "la animación se
 * presenta como un salto al cargar cualquier flujo".
 *
 * El Figma (nota "Animación Skeleton" en los nodos 518-23121 / 518-24633) pide
 * "una animación de barrido lateral continua... El movimiento es fluido y en
 * bucle, sin interrupción brusca". NO define duración ni easing:
 * `get_motion_context` sobre esos nodos devuelve `{"nodes":[]}`, o sea que no
 * hay keyframes en el archivo — la especificación es solo la nota. Por eso se
 * conserva el `1.8s linear infinite` que ya venía del hero, que es el valor que
 * está en producción y el único dato duro que tenemos.
 *
 * Vive ACÁ, en el CSS eager, y no en el del organism del hero, por una razón
 * concreta: EDS carga el CSS POR BLOQUE (`loadCSS(blocks/<block>/<block>.css)`),
 * y `blocks/members-hero/members-hero.css` es quien importaba esta animación.
 * En `/members/profile/elite` y `/members/profile/account` el bloque
 * `members-hero` NO está (verificado en el `.plain.html` de qa: esas rutas solo
 * traen `members-elite` y `members-account`), así que los skeletons de esas
 * rutas no tenían forma de recibir el barrido — de ahí que se hicieran con
 * `animate-pulse` y que el hero se viera distinto según la ruta.
 *
 * `.members-hero__sk` se mantiene como selector para no tocar
 * `members-hero-skeleton` (el único skeleton alineado al Figma, cita 20 nodos)
 * ni su sample; la definición ahora es una sola. */
/* Barrido del `skeletonLoader` de Figma (componente comun a todos los
   skeletons). La banda mide 55.5556% del ancho del elemento — medido en el
   archivo: en un skeletonLoader de 400px la capa `shadow` es de 222.222px — y
   viaja desde x=-55.5556% (fuera por izquierda) hasta x=+100% (fuera por
   derecha), o sea 155.5556% de recorrido.
   La version anterior usaba ese 155.56% de RECORRIDO como background-size, es
   decir como ANCHO de banda: quedaba ~2.8x mas ancha que el diseno y, al ser
   mas ancha que el propio elemento, nunca lo despejaba (siempre habia gradiente
   encima, en vez de entrar y salir).
   Los porcentajes de background-position se calculan sobre (100% - 55.5556%) =
   44.4444%: -125% deja el borde izquierdo en -55.5556% y 225% lo deja en +100%.
   Duracion y easing NO estan declaradas en Figma (get_motion_context devuelve
   vacio: el prototipo las resuelve como interaccion, no como keyframes), asi
   que se mantienen los 1.8s lineales que ya veniamos usando. */
@keyframes skeleton-sweep {
  0% { background-position: -125% 0; }
  100% { background-position: 225% 0; }
}

.skeleton-sweep,
.members-hero__sk {
  background-color: #e9e9e9;
  background-image: linear-gradient(
    90deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(247 251 252 / 25%) 18.75%,
    rgb(255 255 255 / 50%) 39.583%,
    rgb(255 255 255 / 40%) 59.896%,
    rgb(247 251 252 / 25%) 80.729%,
    rgb(255 255 255 / 0%) 100%
  );
  background-size: 55.5556% 100%;
  background-repeat: no-repeat;
  background-position: -125% 0;
  animation: skeleton-sweep 1.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-sweep,
  .members-hero__sk { animation: none; }
}

/* Viajes conservaba el divisor PLANO y a ras (sin radios, `top: 0`) mientras el
   resto de Members lo monta sobre el header con esquinas redondeadas. Se
   homologa borrando ese override: por debajo de 1024 valen los radios y el
   `top` del `.members-elite-sheet::before` genérico, como en el resto de las
   vistas. Acá abajo queda sólo lo propio de desktop. */
@media (min-width: 1024px) {
    .members-trips-container .members-elite-sheet::before {
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        /* -32 y no 0: desde 1024 el wrapper `.members-trips` separa hero y
           sheet con `lg:gap-8`, y con el ::before a ras ese gap se veía BLANCO.
           Mismo valor y mismo motivo que la regla de `.members-miles-container`
           de más arriba. */
        top: -32px;
    }
}